<template>
  <!--餐厅支出-->
  <BasicModal :title="title" :width="850" @register="registerModal" 
              :destroyOnClose="true" :canFullscreen="false" :centered="true"
              :bodyStyle="{height:'calc(100vh - 200px)', overflowY:'hidden'}"
  >
    <div class="jeecg-basic-table jeecg-basic-table-form-container" style="margin-top: -10px">
      <a-form @keyup.enter.native="searchQuery">
        <a-row :gutter="8" type="flex">
          
          <a-col flex="130px">
            <a-form-item label="状态" :label-col="{ style: { width: '60px' } }" >
              <JDictSelectTag placeholder="全部"
                v-model:value="queryParam.memberCouponStatus"
                dictCode="memberCouponStatus"
                :dropdownStyle="{ width: '80px', overflow: 'auto' }"
                :dropdownMatchSelectWidth="false"
                :showArrow="false"
                :allowClear="true"
              />
            </a-form-item>
          </a-col>

          <a-col flex="130px">
            <a-form-item label="类型" :label-col="{ style: { width: '60px' } }" >
              <JDictSelectTag placeholder="全部"
                v-model:value="queryParam.getType"
                dictCode="couponType"
                :dropdownStyle="{ width: '80px', overflow: 'auto' }"
                :dropdownMatchSelectWidth="false"
                :showArrow="false"
                :allowClear="true"
              />
            </a-form-item>
          </a-col>

          <a-col flex="200px">
            <a-form-item label="名称" :label-col="{ style: { width: '60px' } }">
              <a-input placeholder="" v-model:value="queryParam.couponName"></a-input>
            </a-form-item>
          </a-col>

          <a-col flex="200px">
            <a-form-item label="会员" :label-col="{ style: { width: '60px' } }">
              <a-input placeholder="" v-model:value="queryParam.memberName"></a-input>
            </a-form-item>
          </a-col>

          <a-col flex="auto" style="width:150px; margin-right: 0px;">
            <span style="float: right; overflow: hidden;" class="table-page-search-submitButtons">
              <a-button type="primary" color="success" preIcon="ant-design:search" @click="searchQuery" class="mr-10px">查询</a-button>
            </span>
          </a-col>
        </a-row>

      </a-form>
    </div>

    <!--引用表格 :rowSelection="rowSelection"-->
    <BasicTable @register="registerTable" :loading="loading" :onRowClick="handleClick" :rowClassName="rowClassName"></BasicTable>
    <!-- table区域-end v-auth="'business:delete'"-->

  </BasicModal>
</template>

<script lang="ts" setup>
import { ref, computed, unref, reactive, watch, toRaw } from "vue";
import { BasicColumn, BasicTable } from "/@/components/Table";
import { useListPage } from "/@/hooks/system/useListPage";
import { BasicModal, useModal, useModalInner } from "/@/components/Modal";
import { useMessage } from "/@/hooks/web/useMessage";
import { render } from "/@/utils/common/renderUtils";
import { getCouponReceiveList } from "/@/views/cater/promotions/js/promotion.api";;
const { createMessage: $message } = useMessage();
import moment from 'dayjs'
import JDictSelectTag from '/@/components/Form/src/jeecg/components/JDictSelectTag.vue';

const loading  = ref<boolean>(false);
//---------------------初始化 ---------------------------------------------
let type = ref("");
let title = ref("");
const [registerModal, { closeModal }] = useModalInner(async (data) => {
  title.value = "优惠券领用"
  queryParam.couponId = data.couponId;
});
//---------------------初始化 ---------------------------------------------

//定义查询表单，查询条件
const queryParam = reactive<any>({
  
});

function searchQuery() {
  setProps({searchInfo:toRaw(queryParam)});
  reload()
}

function searchReset() {
  Object.assign(queryParam, {memberCouponStatus: '', getType: '', couponName: '', memberName: ''});
  searchQuery();
}

//---------------------列表组件----------------------------------------
//订单列表 - 状态转译
const statusFmt = ({text}: { text: any }) => {
  if (!text) {
    return
  }
  let color = "red";
  if (text == "NEW") {
    color = "geekblue";
  } else if (text == "USED") {
    color = "green";
  } else if (text == "EXPIRE") {
    color = "red";
  } else if (text == "CLOSED") {
    color = "red";
  }
  return render.renderTag(render.renderDict(text, 'memberCouponStatus'), color)
}

//订单列表 - 表头
const columns: BasicColumn[] = [
  { title: '状态', dataIndex: 'memberCouponStatus', width:80, align:'center', customRender: statusFmt},
  { title: '会员', dataIndex: 'memberName', width:130, align:'left', },
  { title: '领取', dataIndex: 'createTime', width:150, align:'center', },
  { title: '使用', dataIndex: 'consumptionTime', width:150, align:'center', },
];

// 列表页面公共参数、方法
const {prefixCls, tableContext} = useListPage({
  designScope: 'coupon-receive-list',
  tableProps: {
    api: getCouponReceiveList,
    columns: columns,
    showIndexColumn: false,    //行号
    clickToRowSelect: true,    //点击选择
    showActionColumn: false,
    showTableSetting: false,
    useSearchForm: false,
    showSummary: false,
    resizeHeightOffset: 85,
    beforeFetch: (params) => Object.assign(params, unref(queryParam)),
  },
})

// 注册table数据
const [registerTable, {reload, setProps, getRawDataSource, setSelectedRowKeys, redoHeight}] = tableContext
//---------------------列表组件----------------------------------------

let selectRows = reactive<any>({id: ''});
function handleClick(record) {
  selectRows.id = record.id
}

function rowClassName(record, index) {
  return record.id === selectRows.id ? 'row-selected' : '';
}
</script>

<style lang="less" scoped>

</style>
